<template>
  <view>
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      祈福记录
    </view>
    <view class="content">
      <view class="tabs">
        <view
          :class="['text', active == i ? 'active' : '']"
          v-for="(item, i) in tablis"
          :key="i"
          @click="select(i)"
          >{{ item.tetx }}</view
        >
      </view>
      <view class="lists">
        <view
          class="row"
          v-for="(item, i) in list"
          :key="i"
          @click="jumpDeatil(item.id)"
        >
          <view class="left">
            <view class="des" v-if="active == 0">{{ item.type_str }}</view>
            <view class="des" v-if="active == 2 || active == 3">{{
              item.contacts_name
            }}</view>
            <view class="jklb" v-if="active == 1"
              >捐款类别：{{ item.type_str }}</view
            >
            <view class="name" v-if="active == 1">姓名：{{ item.names }}</view>
            <view class="time">{{ item.createtime | formatDate }}</view>
          </view>
          <view class="num" v-if="active != 2">{{ item.money }}</view>
          <view class="num" v-if="active == 2">{{ item.offering_amount }}</view>
        </view>
        <view class="noData" v-if="noDat">
          <image
            class="img"
            src="../../../static/Shopping/nodata.png"
            mode=""
          />
          <text>您暂时还没有相关记录~</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      noDat: false,
      active: 0,
      status: "",
      tablis: [
        {
          id: 0,
          tetx: "祈福记录",
        },
        {
          id: 1,
          tetx: "电子功德箱",
        },
        {
          id: 2,
          tetx: "供奉",
        },
        {
          id: 3,
          tetx: "开光",
        },
      ],
      page: 1, // 页码
      pageSize: 10, // 每页条数
      list: [],
      total: "",
      last_page: "",
    };
  },
  onShow() {
    this.getLis();
  },
  onReachBottom() {
    if (this.total / 10 <= this.last_page && this.total > 10) {
      this.loadMore();
    }
  },
  methods: {
    gobackClick() {
      uni.switchTab({
        url: "../../user/users",
      });
    },
    // table切换
    select(i) {
      this.page = 1;
      this.active = i;
      switch (i) {
        case 0:
          this.getLis();
          break;
        case 1:
          this.getLis();
          break;
        case 2:
          this.getLis();
          break;
        case 3:
          this.getLis();
          break;
      }
    },
    // 订单详情
    jumpDeatil(id) {
      if (this.active != 1) {
        uni.navigateTo({
          url: "./Blessingdetails?id=" + id + "&type=" + this.active,
        });
      }
    },
    // 获取祈福记录列表
    async getLis() {
      this.page = 1;
      const res = await this.$myRequest({
        url: this.getUrl(this.active),
        method: "POST",
        data: {
          page: this.page, // 页码
          pageSize: this.pageSize, // 每页条数
        },
      });
      this.list = res.data.data.data;
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
      if (this.list.length == 0) {
        this.noDat = true;
      } else {
        this.noDat = false;
      }
    },
    // 获取订单下一页列表
    async loadMore() {
      const res = await this.$myRequest({
        url: this.getUrl(this.active),
        method: "POST",
        data: {
          page: (this.page += 1), // 页码
          pageSize: this.pageSize, // 每页条数
        },
      });
      this.list = this.list.concat(res.data.data.data);
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
    },
    getUrl(i) {
      switch (i) {
        case 0:
          return "pray/buddhistPray";
        case 1:
          return "pray/electronicMeritBox";
        case 2:
          return "pray/offering";
        case 3:
          return "pray/kaiGuang";
      }
    },
  },
};
</script>

<style lang="scss">
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.content {
  padding-top: 88rpx;
  overflow: hidden;
  .tabs {
    width: 100%;
    height: 100rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30rpx;
    .text {
      font-size: 30rpx;
      font-weight: 400;
      color: #999999;
      &.active {
        font-weight: 400;
        color: #333333;
        position: relative;
      }
      &.active::after {
        position: absolute;
        content: "";
        width: 50rpx;
        height: 6rpx;
        border-radius: 40rpx;
        background: #c52b2e;
        bottom: -28rpx;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .lists {
    margin-top: 20rpx;
    .row {
      width: 100%;
      min-height: 150rpx;
      margin-bottom: 20rpx;
      background: #fff;
      box-sizing: border-box;
      padding: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        .des {
          font-size: 30rpx;
          color: #333333;
          font-weight: normal;
          margin-bottom: 15rpx;
        }
        .time {
          font-size: 26rpx;
          color: #999;
        }
        .jklb {
          font-size: 30rpx;
          font-weight: normal;
          color: #333333;
        }
        .name {
          font-size: 28rpx;
          font-weight: normal;
          color: #333333;
          margin: 10rpx 0;
        }
      }
      .num {
        font-size: 34rpx;
        font-weight: normal;
        color: #c52b2e;
      }
    }
  }
  .noData {
    width: 100%;
    min-height: calc(100vh - 210rpx);
    background: #fff;
    overflow: hidden;
    .img {
      display: block;
      width: 348rpx;
      height: 190rpx;
      margin: 314rpx auto 30rpx;
    }
    text {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 30rpx;
      font-weight: 400;
      color: #999999;
      letter-spacing: 2rpx;
    }
  }
}
</style>
